<!--
readonly
1. 作用: 用于创建一个对象的深只读副本.
2. 用法:
	const original = reactive({...})
	const readOnlyCopy = readOnly(original)
3. 特点:
	- 对象的所有嵌套属性都将变为只读.
	- 任何尝试修改这个对象的操作都会被阻止(在开发模式下, 还会在控制台中发出警告).
4. 应用场景:
	- 创建不可变的状态快照.
	- 保护全局状态或配置不被修改.

shallowReadonly
1. 作用: 与 readonly 类似, 但只作用于对象的顶层属性.
2. 用法:
	const original = reactive({ ... })
	const shallowReadOnlyCopy = shallowReadonly(original)
3. 特点:
	- 只将对象的顶层属性设置为只读, 对象内部的嵌套属性仍然是可变的.
	- 适用于只需要保护对象顶层属性的场景.
-->
<template>
	<div class="app">
		<h2>当前sum1为: {{ sum1 }}</h2>
		<h2>当前sum2为: {{ sum2 }}</h2>
		<h2>当前car1为: {{ car1 }}</h2>
		<h2>当前car2为: {{ car2 }}</h2>
		<button @click="changeSum1">点我 sum1 + 1</button>
		<button @click="changeSum2">点我 sum2 + 1</button>
		<button @click="changeBrand1">修改品牌(car1)</button>
		<button @click="changeColor1">修改颜色(car1)</button>
		<button @click="changePrice1">修改价格(car1)</button>
		<button @click="changeBrand2">修改品牌(car2)</button>
		<button @click="changeColor2">修改颜色(car2)</button>
		<button @click="changePrice2">修改价格(car2)</button>
	</div>
</template>

<script setup lang="ts" name="App">
/**
 * @name: App
 * @author: chuanshen
 * @version: 2024-08
 */
import { ref, reactive, readonly, shallowReadonly } from 'vue';
let sum1 = ref(0)
let sum2 = readonly(sum1)	// 必须传入一个响应式数据, 能维护住关联关系
let car1 = reactive({
	brand: '奔驰',
	options: {
		color: '红色',
		price: 100
	}
})
let car2 = shallowReadonly(car1)

function changeSum1() {
	sum1.value += 1
}

function changeSum2() {
	sum2.value += 1	// sum2 是不能修改的
}

function changeBrand1 () {
	car1.brand = '宝马'
}
function changeColor1 () {
	car1.options.color = '绿色'
}
function changePrice1 () {
	car1.options.price += 10 
}

function changeBrand2 () {
	car2.brand = '宝马'
}
function changeColor2 () {
	car2.options.color = '绿色'
}
function changePrice2 () {
	car2.options.price += 10 
}
</script>

<style scoped>
.app {
	background-color: #ddd;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}
button {
	margin: 0 5px;
}
</style>